<template>
  <div class="material_type">
    <span class="state_icon_color"
          :class="stateColor">{{data.materialRequestTypeLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'MaterialType',
  props: {
    data: Object
  },
  computed: {
    // 根据工单状态返回相应class
    stateColor() {
      switch (this.data.materialRequestTypeValue) {
        case 'Normal':
          // 班组要料
          return 'material_type_normal'
        case 'Supply':
          // 生产要料
          return 'material_type_supply'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 要料类型颜色 */
  // 班组要料
  @materialTypeNormal: #00b4ff;
  // 生产补料
  @materialTypeSupply: #7e8e9f;
  .material_type{
    .state_icon_color{
      /*批次任务类型*/
      // 正常
      &.material_type_normal:before{
        background-color: @materialTypeNormal;
      }
      // 返工
      &.material_type_supply:before{
        background-color: @materialTypeSupply;
      }
    }
  }
</style>
